<template>
    <transition name="el-fade-in-linear">
        <el-card 
        v-show="tabShow"
        class="info-right" 
        >
            <el-tabs 
            v-model="tabsActive" 
            :class=" {'re-tabs': isRightTabsClass}"
            >
                <template 
                v-for="(item ,index) in tabsArr"
                >
                    <el-tab-pane 
                    ref="reRightTabPane" 
                    v-if="item.isShow"
                    :key="index" 
                    :name="item.id" 
                    >
                        <div slot="label" class="tab-title">
                            <img :src="item.imgSrc" alt="">
                            <span>&nbsp;{{item.title}}</span>
                        </div>
                    </el-tab-pane>
                </template>
            </el-tabs>

            <!-- 该项目经理负责的项目 -->
            <div 
            v-show="tabsActive == '1'" 
            class="right-nav-div"
            >
                <auto-list 
                    key="manager"
                    :search="tabsArrComputed[0].search" 
                    :required-key="tabsArrComputed[0].search.manager"
                    :action="`${$store.state.api.tbUrl}/noticerelated/manageritems.json`" 
                    :isTagLong="true" 
                    :isBouTime="false" 
                    @click="tabsArr[0].onClick"
                    @queryEnd="tabsArr[0].onPage" 
                    @show="tabsArr[0].onShow"
                ></auto-list>
            </div>

            <!-- 类似项目信息 -->
            <div 
            v-show="tabsActive == '2'" 
            class="right-nav-div"
            >
                <auto-list 
                    key="similar"
                    :search="tabsArrComputed[1].search" 
                    :required-key="data.guid"
                    :action="`${$store.state.api.tbUrl}/noticerelated/similaritems.json`" 
                    :isTagLong="true" 
                    :isBouTime="false" 
                    @click="tabsArr[1].onClick"
                    @queryEnd="tabsArr[1].onPage" 
                    @show="tabsArr[1].onShow"
                ></auto-list>
            </div>
        </el-card>
    </transition>
</template>

<script>
import AutoList from '../components/auto-list.vue';

import icon5 from '@images/notice/编组5.png';
import icon6 from '@images/notice/编组6.png';

export default {
    components: {
        AutoList,
    },
    props: {
        type: {
            type: String,
            default: '',
        },
        data: {
            type: Object,
            default: () => ({}),
        },
        hxr: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            isRightTabsClass: false,

            tabsActive: '1',

            tabsArr: [
                {
                    title: '该项目经理负责的项目',
                    id: '1',
                    isShow: false,
                    imgSrc: icon5,
                    onShow: () => {
                        this.tabsArr[0].isShow = true;

                        this.$nextTick(() => {
                            this.setDefaultTabActive();
                        });
                    },
                    onClick: (val, index) => {
                        this.setCzc(['查公告-详情', '点击列表' , '类似项目信息', index, `notice-list-similarProject`]);

                        this.$emit('click');
                    },
                    onPage: (val) => {
                        this.setCzc(['查公告-详情', '翻页' , '项目经理人关联项目', val.current ,`notice-page-managerProject`]);
                    },
                },
                {
                    title: '类似项目信息',
                    id: '2',
                    isShow: false,
                    imgSrc: icon6,
                    onShow: () => {
                        this.tabsArr[1].isShow = true;

                        this.$nextTick(() => {
                            this.setDefaultTabActive();
                        });
                    },
                    onClick: (val, index) => {
                        this.setCzc(['查公告-详情', '点击列表' , '项目经理关联项目信息', index, `notice-list-managerProject`]);

                        this.$emit('click');
                    },
                    onPage: (val) => {
                        this.setCzc(['查公告-详情', '翻页' , '类似项目', val.current ,`notice-page-similarProject`]);
                    },
                },
            ],
        };
    },
    computed: {
        tabsArrComputed() {
            var data = this.data,
                managerSearch = {},
                managerSwitchObj = {
                    'zhao-biao': () => {
                        managerSearch = {
                            noticetype: this.getQuery('noticetype'),
                            sortname: 'a.notice_publish_time',
                            company: data.tender,
                            manager: data.manager,
                        };
                    },
                    'zhong-biao-hxr': () => {
                        let companyList = [],
                            managerList = [];

                        this.hxr.forEach((item, index) => {
                            if (item.MANAGER && item.MANAGER !== '/') {
                                companyList.push(item.COMPANY);
                                managerList.push(item.MANAGER);
                            }
                        });
                        
                        managerSearch = {
                            noticetype: this.getQuery('noticetype'),
                            sortname: 'publishtime',
                            company: companyList.join(','),
                            manager: managerList.join(','),
                        };
                    },
                    'zhong-biao': () => {
                        managerSearch = {
                            noticetype: this.getQuery('noticetype'),
                            sortname: 'publishtime',
                            company: data.bidder,
                            manager: data.manager,
                        };
                    },
                },
                calcManagerSearch = managerSwitchObj[this.type];
                
            if (calcManagerSearch) {
                // 根据type动态生成项目经理接口所需参数
                calcManagerSearch();
            }

            return [
                {
                    title: '该项目经理负责的项目',
                    search: {
                        pagesize: 5,
                        sortorder: 'desc',
                        guid: data.guid, // 非接口必要参数
                        ...managerSearch
                    },
                },
                {
                    title: '类似项目信息',
                    search: {
                        pagesize: 5,
                        sortorder: 'desc',
                        sortname: 'publishtime',
                        guid: data.guid, // 非接口必要参数
                        area: data.area,
                        industry: data.industry,
                        noticetype: data.noticetype,
                    },
                },
            ];
        },
        tabShow() {
            return this.tabsArr.filter(item => item.isShow).length;
        },
    },
    methods: {
        // 右侧 el-tabs
        setDefaultTabActive() {
            let reTabPanes = this.tabsArr.filter(item => item.isShow);

            this.tabsActive = reTabPanes[0]?.id;

            if (reTabPanes.length === 1) {
                this.isRightTabsClass = true;
            } else {
                this.isRightTabsClass = false;
            }
        },
    },
    mounted() {
        
    },
};
</script>

<style lang="scss" scoped>
    .info-right{
        ::v-deep{
            .el-card__body{
                padding: 5px 10px;
            }

            .el-tabs__header {
                margin-bottom: 6px;
            }
        }

        .tab-title {
            display: flex;
            align-items: center;
        }
        
        .right-nav-div{
            margin-top: 6px;
        }

        .re-tabs {
            ::v-deep {
                .el-tabs__header {
                    margin: 0;
                    margin-bottom: 0px;
                }

                .el-tabs__nav-wrap::after {
                    position: static !important;
                }
                .el-tabs__item:hover {
                    color: black;
                }
                .el-tabs__item.is-active {
                    color: black;
                }
                .el-tabs__active-bar {
                    height: 0;
                    background-color: none !important;
                }
            }
        }
    }
</style>